<template>
  <div class="home-main">
    <div class="total">
      <div class="item">
        <p>总销售量</p>
        <span>{{ totalData.saleTotal | num }}</span>
        <span class="sale"> 今日销售额：{{ totalData.sale | num }} </span>
      </div>
      <div class="item">
        <p>总访问量</p>
        <span>{{ totalData.viewsTotal | num }}</span>
        <span class="sale"> 今日访问量：{{ totalData.views | num }}</span>
      </div>
      <div class="item">
        <p>总收藏量</p>
        <span>{{ totalData.collectTotal | num }}</span>
        <span class="sale"> 今日销售额：{{ totalData.collect | num }} </span>
      </div>
      <div class="item">
        <p>总支付量</p>
        <span>{{ totalData.payTotal | num }}</span>
        <span class="sale">今日支付量：{{ totalData.pay | num }} </span>
      </div>
    </div>

    <div class="content">
      <div class="month">
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area">
        <div class="title">产品销售比例</div>
        <div id="bin" style="width: 100%; height: 300px"></div>
      </div>
    </div>

    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>{{ orderData.curOrderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{ orderData.curCollect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
              <div>{{ orderData.curMoney }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div>{{ orderData.orderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{ orderData.collect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
              <div>{{ orderData.money }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { totalInfo, format, orderinfo } from "@/http/index.js";
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {
      totalData: [],
      orderData: [],
    };
  },
  methods: {
    // 获取数据统计
    initedit() {
      totalInfo().then((res) => {
        this.totalData = res.data.data.list;
      });
    },

    // 获取图表的数据
    initformat() {
      format()
        .then((res) => {
          // console.log(res, "这是图表的数据");
          let arr = res.data.result.data.sale_money;

          let arrx = arr.map((item) => {
            return item.name;
          });
          let money = arr.map((item) => {
            return item.total_amount;
          });
          let total = arr.map((item) => {
            return item.num;
          });
          let circles = arr.map((item) => {
            return {
              value: item.total_amount,
              name: item.name,
            };
          });
          // console.log(arrx, money, total, circles, "这是x轴的数据");
          this.cricle(circles);
          this.charts(arrx, money, total);
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 月销售额的图表
    charts(data, money, total) {
      var myChart = echarts.init(document.getElementById("charts"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["销售额", "销售量"],
        },
        xAxis: [
          {
            type: "category",
            data: data,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "销售额",
            type: "line",
            data: money,
            smooth: true, //是否平滑曲线显示
          },
          {
            name: "销售量",
            type: "bar",
            data: total,
          },
        ],
      };
      myChart.setOption(option);
    },
    //  产品销售比例图表
    cricle(circle) {
      var myChart = echarts.init(document.getElementById("bin"));
      let option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: circle,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    // 今日订单的数据
    initinfo() {
      orderinfo()
        .then((res) => {
          this.orderData = res.data.list;
          // console.log(this.orderData, "今日订单的数据");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  filters: {
    num(value) {
      if (!value) return;
      return value.toLocaleString();
    },
  },
  created() {},
  mounted() {
    this.initedit();
    this.initformat();
    this.initinfo();
    // this.cricle();
  },
};
</script>
<style lang="scss" scoped>
.home-main {
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
  .total {
    display: flex;
    height: 150px;
    // background-color: aqua;
    justify-content: space-between;
    border: 1px solid transparent;
    .item {
      width: 23%;
      height: 100%;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      color: #fff;
      padding-left: 8px;
    }
    .item:nth-child(1) {
      background-image: linear-gradient(#df887d, #88554d);
    }

    .item:nth-child(2) {
      background-image: linear-gradient(#409eff, #2e556e);
    }

    .item:nth-child(3) {
      background-image: linear-gradient(#b54fa8, #713c7a);
    }

    .item:nth-child(4) {
      background-image: linear-gradient(#1cd2f1, #39717a);
    }
  }
  .content {
    width: 100%;
    height: 320px;
    display: flex;
    margin-top: 20px;
    .month {
      flex: 1.5;
      background-color: #fff;
      padding: 10px;

      // height: 400px;
    }
    .area {
      flex: 1;
      background-color: #fff;
      padding: 10px;
    }
  }

  .home-footer {
    display: flex;
    // padding-left: 20px;
    margin-top: 20px;

    .box-card {
      flex: 1;
      margin-right: 5px;

      span {
        font-weight: 600;
      }
    }
    .item {
      text-align: center;
      font-size: 24px;
      color: #333;
      .el-col {
        border-right: 1px solid #eee;
      }
      .el-col:last-child {
        border-right: none;
      }
      .title {
        margin-bottom: 10px;
        font-size: 14px;
      }
    }
  }
}
</style>
